<template lang="pug">
.es6_lang_content
  Header(name="ES6的一些基础语法")
  .content_es6
    ul.left_action_bar
      li(v-for="item in list", :key="item.name" @click="changeList(item)") 
        span {{ item.name }}
    mavon-editor.md.rightmd(
      v-html="handboook",
      :subfield="false",
      :toolbarsFlag="false",
      :boxShadow="false",
      :ishljs="true"
    )
</template>
<script>
import Promise from "./markdown/Promise.md";
import AroowFunction from "./markdown/ArrowFunction.md";
export default {
  name: "Es6",
  methods: {
    changeList(item) {
      this.handboook = item.handboook;
    }
  },
  data() {
    return {
      handboook: Promise,
      list: [
        {
          handboook: Promise,
          name: "Promise"
        },
        {
          handboook: AroowFunction,
          name: "箭头函数"
        }
      ]
    };
  }
};
</script>
<style lang="stylus" scoped>
.es6_lang_content {
  display: flex;
  width: 100%;
  height: 100%;
  padding-left: 32px;
  flex-direction: column;

  .content_es6 {
    display: flex;

    .rightmd {
      flex-shrink: 1;
      padding: 0 12px;
      box-sizing: border-box;
    }
  }

  .left_action_bar {
    flex-shrink: 0;
    border: 1px solid #ededed;
    display: flex;
    flex-direction: column;
    align-items: center;

    li {
      box-sizing: border-box;
      padding: 12px 12px;
      font-size: 24px;
      border-bottom: 1px solid #ededed;
    }
  }
}
</style>
